<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="main"></div>
</body>
<script src="jquery.js"></script>
<script>
    var main = document.getElementById('main');

    var myChart = echarts.init(main);

    var dataBJ = [
        [9.7, 3.0, 9.4, 6.7, 5.8, 4.3]
    ];
    var dataSH = [

        [10, 5.8, 10, 7.2, 7.6, 4.5]
    ];

    var dataGZ = [

        [9.8, 3.0, 6.8, 5.8, 6.9, 3.6]
    ];
    var dataZZ = [
        [9.9, 4.6, 7.3, 6, 3.2, 4.0]
    ];

    var lineStyle = {
        normal: {
            width: 1,
            opacity: 0.5
        }
    };

    option = {
        backgroundColor: '#161627',
        title: {
            text: '英雄 - 雷达数据图',
            left: 'center',
            textStyle: {
                color: '#eee'
            }
        },
        roseType: 'angle',
        itemStyle: {
            emphasis: {
                fontStyle:'lighter',
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
        },
        legend: {
            bottom: 5,
            data: ['亚索', '盲僧', '雷恩加尔', '佐伊'],
            itemGap: 20,
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            selectedMode: 'single'
        },
        visuaMap: {
            inRange: {
                colorLightness: [0.5, 0.8],
              
                show: false,
                min: 0,
                max: 10000
            }, 
        },
        calendar: {
                range: '2020'
            },
        radar: {
            indicator: [
                { name: '伤害', max: 10 },
                { name: '功能', max: 10 },
                { name: '机动', max: 10 },
                { name: '控制', max: 10 },
                { name: '坚韧', max: 10 },
                { name: '难度', max: 5 }
            ],
            shape: 'circle',
            splitNumber: 5,
            name: {
                textStyle: {
                    color: 'rgb(238, 197, 102)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: [
                        'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                        'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                        'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                    ].reverse()
                }
            },
            splitArea: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(238, 197, 102, 0.5)'
                }
            }
        },
        series: [
            {
                name: '亚索',
                type: 'radar',
                lineStyle: lineStyle,
                data: dataBJ,
                symbol: 'none',
                itemStyle: {
                    color: '#F9713C'
                },
                areaStyle: {
                    opacity: 0.1
                }
            },
            {
                name: '盲僧',
                type: 'radar',
                lineStyle: lineStyle,
                data: dataSH,
                symbol: 'none',
                itemStyle: {
                    color: '#B3E4A1'
                },
                areaStyle: {
                    opacity: 0.05
                }
            },
            {
                name: '雷恩加尔',
                type: 'radar',
                lineStyle: lineStyle,
                data: dataGZ,
                symbol: 'none',
                itemStyle: {
                    color: 'rgb(238, 197, 102)'
                },
                areaStyle: {
                    opacity: 0.05
                }
            },
            {
                name: '佐伊',
                type: 'radar',
                lineStyle: lineStyle,
                data: dataZZ,
                symbol: 'none',
                itemStyle: {
                    color: '#F9713C'
                },
                areaStyle: {
                    opacity: 0.1
                }
            }
        ]
    };

    myChart.setOption(option);
</script>

</html>